<template>
	<view class="popup">
		<u-popup v-model="uView.popup.show" mode="bottom" :mask-custom-style="{background: 'rgba(17, 17, 17, 0.4)'}"
			:safe-area-inset-bottom="true">
			<view class="wd-py-80r" style="background-color: #555;color:#fff">
				<view class="wd-px-60r wd-flex wd-items-center">
					<view class="wd-w-200r">透明度</view>
					<view class="wd-flex-1">
						<u-slider v-model="value" min="0" max="100" @moving="onMoving()"></u-slider>
					</view>
					<view class="wd-w-120r wd-text-right">{{ value }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	export default {
		name: "alpha-popup",
		props: {
			canvas: {
				type: Object,
			},
		},
		data() {
			return {
				value: 0,
				activeObj: {},
				uView: {
					popup: {
						show: false
					}
				}
			};
		},
		watch: {},
		methods: {
			//展示
			show(type) {
				this.uView.popup.show = true;
				this.activeObj = this.canvas.getActiveObject() || {};
				this.value = (1 - this.activeObj.opacity) * 100
			},
			//关闭
			close() {
				this.uView.popup.show = false;
			},
			//移动
			onMoving() {
				this.activeObj.set({
					opacity: 1 - this.value / 100
				})
				this.canvas.renderAll();
			}
		},
	}
</script>

<style>
	.popup {
	}
</style>